// 期货合约信息
import React from 'react';
import { connect } from 'dva';
import { NoDataMaskC, IconC } from '../../../../comps';
import { Spin } from 'antd';
import mystyle from './index.less';
import accounting from 'accounting';
class MarketInfoC extends React.Component {
  state = {
    masking: true, //是否显示蒙版
    info: {}, //信息
  };

  componentDidMount() {
    this.getInfo(this.props);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { tradingcode, exchangecode } = this.props;
    if (tradingcode != nextProps.tradingcode || exchangecode != nextProps.exchangecode) {
      if (nextProps.tradingcode && nextProps.exchangecode) {
        this.setState(
          {
            info: {},
          },
          () => {
            this.getInfo(nextProps);
          },
        );
      } else {
        this.setState({
          info: {},
        });
      }
    }
  }

  //获取数据
  getInfo = (obj) => {
    const { dispatch } = this.props;
    const { tradingcode, exchangecode } = obj;
    if (!tradingcode) return;
    dispatch({
      type: 'stockIndexM/queryMarketInfo',
      payload: {
        tradingCode: tradingcode,
        exchangeCode: exchangecode,
      },
      callback: (data) => {
        this.setState({
          info: data || {},
        });
      },
    });
  };

  //格式化数据
  formatData = (value, unit, number) => {
    if (value == undefined || value == null) {
      return '--';
    } else {
      if (unit == '%') {
        return parseFloat(value * 100).toFixed(2) + unit;
      } else {
        if (number === undefined) {
          return accounting.formatNumber(value, (value + '').split('.')[1] ? (value + '').split('.')[1].length : 0) + (unit || '');
        } else {
          return accounting.formatNumber(value, number) + (unit || '');
        }
      }
    }
  };
  render() {
    const { loading, tradingcode } = this.props;
    const { info } = this.state;
    return (
      <div>
        <Spin spinning={loading.effects['stockIndexM/queryMarketInfo'] == true}>
          <div className={mystyle.wrapper}>
            <div className={mystyle.content}>
              <div className={mystyle.itemRow}>
                <div>今开盘</div>
                <div>{info.openPx || '--'}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>涨跌</div>
                {info.upDown != null || info.upDown != undefined ? (
                  <div>
                    {Math.abs(parseFloat(info.upDown * 100).toFixed(4) * 1)}%
                    {(info.upDown != null || info.upDown != undefined) && info.upDown !== 0 ? (
                      <IconC
                        type={info.upDown > 0 ? 'upRegulate' : info.upDown == 0 ? '' : 'downRegulate'}
                        style={{ marginLeft: '5px', width: '8px', height: '12px', lineHeight: '12px', marginTop: '-4px' }}
                      />
                    ) : null}
                  </div>
                ) : (
                  <div>--</div>
                )}
              </div>
              <div className={mystyle.itemRow}>
                <div>最高价</div>
                <div>{this.formatData(info.highPx, null)}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>最低价</div>
                <div>{this.formatData(info.lowPx, null)}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>成交量</div>
                <div>{this.formatData(info.totalVolumeTrade, '手', 0)}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>成交金额</div>
                <div title={this.formatData(info.totalValueTrade, null, 4)}>{this.formatData(info.totalValueTrade, null, 4)}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>买价</div>
                <div>{this.formatData(info.buy1Price, null)}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>买量</div>
                <div>{this.formatData(info.buy1OrderQty, '手', 0)}</div>
              </div>
              <div className={`${mystyle.itemRow}`}>
                <div>卖价</div>
                <div>{this.formatData(info.sell1Price, null)}</div>
              </div>
              <div className={`${mystyle.itemRow}`}>
                <div>卖量</div>
                <div>{this.formatData(info.sell1OrderQty, '手', 0)}</div>
              </div>
              <div className={`${mystyle.itemRow}`}>
                <div>持仓量</div>
                <div title={this.formatData(info.openInterest, '手', 0)}>{this.formatData(info.openInterest, '手', 0)}</div>
              </div>
            </div>
            {!tradingcode ? <NoDataMaskC height={'100%'} title={'请选择合约代码，加载数据！'} /> : null}
          </div>
        </Spin>
      </div>
    );
  }
}

export default connect(({ stockIndexM, loading }) => ({ stockIndexM, loading }))(MarketInfoC);
